<template>
  <view>
    <u-navbar title="订单数据" :safeAreaInsetTop="true"></u-navbar>
    <div class="top-bg"></div>
    <div class="msg-box">
      <div>
        <div>收入总额</div>
        <div>￥{{ from.totalOrderPrice }}</div>
      </div>
      <div>
        <div>口味</div>
        <div>{{ from.flavorScore }}分</div>
      </div>
      <div>
        <div>份量</div>
        <div>{{ from.quantityScore }}分</div>
      </div>
      <div>
        <div>包装</div>
        <div>{{ from.deliveryScore }}分</div>
      </div>
    </div>
    <div class="timepick">
      <div class="pik1" @click="show1 = true">
        {{ formatDateTimeForHMS2(value1) }}
      </div>
      <div>至</div>
      <div class="pik1" @click="show2 = true">
        {{ formatDateTimeForHMS2(value2) }}
      </div>
      <div>
        <button
          style="
            height: 50rpx;
            font-size: 13px;
            text-align: center;
            line-height: 50rpx;
          ">
          导出
        </button>
      </div>
    </div>

    <div class="box1">
      <div class="time">时间：2024年03月12日</div>
      <div>今日收入：￥10000</div>
      <div
        style="display: flex; justify-content: space-between"
        @click="tourl('/pages/copies/index')">
        <div>有效订单：100份</div>
        <div>></div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
        @click="tourl('/pages/payback/index')">
        <div>售后记录：10份</div>
        <div>
          <button
            style="
              height: 50rpx;
              font-size: 13px;
              text-align: center;
              line-height: 50rpx;
            "
            @click.stop="addmsg()">
            导出
          </button>
        </div>
        <div>></div>
      </div>
    </div>
    <up-datetime-picker
      hasInput
      :show="show1"
      v-model="value1"
      @confirm="confirm1"
      @cancel="cancel"
      @close="close"
      mode="datetime"></up-datetime-picker>
    <up-datetime-picker
      hasInput
      :show="show2"
      v-model="value2"
      @confirm="confirm2"
      @cancel="cancel"
      @close="close"
      mode="datetime"></up-datetime-picker>
    <Tabbar></Tabbar>
  </view>
</template>
<script setup>
import { getping, getpingmsg } from '@/api/getfood'
import Tabbar from '@/components/tabbar/index.vue'
import { useMemberStore } from '@/stores'
import { formatDateTimeForHMS2 } from '@/utils/friendlytime'
const memberStore = useMemberStore()
const show1 = ref(false)
const show2 = ref(false)
const data = ref({
  createTime: '',
  totalOrderSale: '',
  totaAfterSales: '',
  totalOrderCount: ''
})
// 销售评价数据
const from = ref({
  flavorScore: '',
  totalOrderPrice: '',
  deliveryScore: '',
  quantityScore: ''
})
// 开始时间选择器
const value1 = ref(Date.now() - 86400000)
// 结束时间选择
const value2 = ref(Date.now())
const tourl = (url) => {
  uni.navigateTo({
    url
  })
}
const getdata = ref({
  storeId: memberStore.profile.storeId,
  startDate: '2022-04-21',
  endDate: ''
})
/***
 *
 * @param 查询店铺数据
 */
const getmsg = async (data) => {
  data.startDate = formatDateTimeForHMS2(data.startDate)
  data.endDate = formatDateTimeForHMS2(data.endDate)
  const res = await getping(data)
  Object.assign(from.value, { ...res.result })
}
const addmsg = () => {
  uni.showToast({
    icon: 'success',
    title: '导出成功',
    duration: 2000
  })
}
onLoad(() => {
  getmsg(getdata.value)
  getpinmsg(getdata.value)
})
// 时间判断
const confirm1 = (e) => {
  if (e.value > value2.value) {
    uni.showToast({
      icon: 'error',
      title: '时间填写错误',
      duration: 2000
    })
    show1.value = false
  } else {
    value1.value = e.value
    getdata.value.startDate = '2022-04-21'
    getdata.value.endDate = value2.value
    show1.value = false
    getmsg(getdata.value)
    getpinmsg(getdata.value)
  }
}

const confirm2 = (e) => {
  if (e.value < value1.value) {
    uni.showToast({
      icon: 'error',
      title: '时间填写错误',
      duration: 2000
    })
    show2.value = false
  } else {
    value2.value = e.value
    getdata.value.startDate = '2022-04-21'
    getdata.value.endDate = value2.value
    show2.value = false
    getmsg(getdata.value)
    getpinmsg(getdata.value)
  }
}
// 关闭时间选择
const cancel = () => {
  show1.value = false
  show2.value = false
}
const close = () => {
  show1.value = false
  show2.value = false
}
/**
 *
 * @获取营业数据概览方法
 */
const getpinmsg = async (data) => {
  const res = await getpingmsg(data)
  console.log(res)
}
</script>
<style>
.u-status-bar.data-v-c0b45a48 {
  background: none !important;
}
.u-navbar__content.data-v-9d9e7ee2 {
  background: none !important;
}
.u-navbar--fixed.data-v-9d9e7ee2 {
  background: rgba(255, 99, 6, 1);
  position: relative !important;
}
.top-bg {
  width: 100%;
  height: 40rpx;
  background: rgba(255, 99, 6, 1);
}
.msg-box {
  width: 690rpx;
  height: 128rpx;
  border-radius: 20rpx;
  background: rgba(255, 99, 6, 1);
  margin: 30rpx auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}
.box1 {
  width: 690rpx;
  height: 324rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  margin: 20rpx auto;
  padding: 20rpx;
  line-height: 70rpx;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
page {
  background: rgba(246, 246, 246, 1);
}
.time {
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.timepick {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 30rpx auto 20rpx;
}
.pik1 {
  width: 194rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background: rgba(217, 217, 217, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
</style>
